import { View, Text, Image } from '@tarojs/components'
import { getIsMapArray } from '../myUtils'
import ArrowRight from '../images/路径.png'
import './index.scss'

interface CrumbItem {
    lable: string
}

interface CrumbsProps {
    dataList: CrumbItem[],
    onClick(item,e): void
}

function App(props: CrumbsProps) {

    const {
        dataList,
        onClick
    } = props

    return (
        <View className='crumbs_container'>
            {
                getIsMapArray(dataList) && dataList.map((item: any, index) => {
                    return (
                        <View key={index} className='crumb_item' >
                            <View
                              data-index={index}
                              className='crumb_text'
                              onClick={(e) => onClick(item,e)}
                              style={{ color: (index == dataList.length - 1) && dataList.length > 1 ? '#999999' : '' }}
                            >
                                {item.lable}
                            </View>
                            <Image
                              style={{ display: (index == dataList.length - 1) ? 'none' : '' }}
                              className='crumb_icon'
                              src={ArrowRight}
                            />
                        </View>
                    )
                })
            }
        </View>
    )
}
export default App